import React from 'react';
import { connect } from 'dva';
import styles from './timeBox.less';
import { slideDownReturn } from 'react-magic'
import { StyleSheet, css } from 'aphrodite';
import { Tabs, WhiteSpace } from 'antd-mobile';
import { getData ,addSessionData ,getSessionData} from '../../../../utils/localData'

const sss = StyleSheet.create({
    magic: {
        animationName: slideDownReturn,
        animationDuration: '0.3s',
        background: 'white',
        height:'4.8rem',
        width:'100%'
    },
});

@connect(({global,timeManager}) => ({
    global,timeManager
}))
export default class TimeBox extends React.Component {
    constructor() {
        super()
        this.state = {
          timeBoxShow:false,
          timeList:[],
          cDate:'',
          cTime:''
        }
    }
    first = true
    dateIndex = 0
    timeIndex = 0
    renderContent = tab =>
    {
        let times = []
            this.state.timeList.forEach((item,i) => {
                if(item.d===tab.title){
                    times.push(item)
                }
            })

        let timeDiv = times.map((item,i) => (
            <div key={i} className={styles.time} onClick={this.timeOnClick.bind(this,item.key)}>
                <div className={item.isChange?styles.yc:styles.nc} >{item.body}</div>
            </div>
        ))

       return(<div className={styles.content}>
          {/*style={{height: (document.documentElement.clientHeight/2-100)+'px'}}*/}
            <div className={styles.times}>
                {timeDiv}
            </div>
        </div>);
    }

    timeOnClick(i,e){
        this.timeIndex = i
        let list = []
        this.state.timeList.forEach((item,j)=>{
            if(i===j){
                this.state.timeList[j].isChange = true
                this.state.cTime = this.state.timeList[j].body
            }else{
                this.state.timeList[j].isChange = false
            }
            list.push(this.state.timeList[j])
        })
        this.setState({timeList:list})
        // console.log(this.dateIndex+"???"+this.timeIndex)
        // console.log(list)
    }
    dateOnClick(d,e){
        this.dateIndex = e 
        this.state.cDate = d.backTime
    }

    render() {
        // console.log("渲染")
        let showIndex
        if(getSessionData("myDateIndex") || getSessionData("myDateIndex")==="0"){
            showIndex = Number(getSessionData("myDateIndex"))
        }
        let datei 
        let timei 
        let tabs = []
        let tempList = []
        let i = -1
        if(this.dateIndex && this.timeIndex){
            datei = Number(this.dateIndex)
            timei = Number(this.timeIndex)
        }
        // console.log(datei+"++++++++++"+timei)
        if(this.props.timeManager.timeMag.takeTimesList && this.props.timeManager.timeMag.takeTimesList.length>0){
            //if(this.state.cDate ==='')this.state.cDate = this.props.timeManager.timeMag.takeTimesList[0].backTime;//默认为第一个日期段
            if(datei){
                this.state.cDate = this.props.timeManager.timeMag.takeTimesList[datei].backTime;
            }else{
                this.state.cDate = this.props.timeManager.timeMag.takeTimesList[0].backTime;
            }
            this.props.timeManager.timeMag.takeTimesList.forEach((element,index) => {
                if(element.takeTime){//装载所有时间
                    let list = element.takeTime.split(",")
                    list.forEach((item) => {
                        i++
                        tempList.push(
                            {
                                key:i,
                                d:element.date,
                                body:item,
                                isChange:false
                            }
                        )
                    })
                }


                tabs.push({
                    title:element.date,
                    takeTime:element.takeTime,
                    backTime:element.backTime
                })
            });
        }
        if(this.state.timeList.length<1)this.state.timeList = tempList
        // console.log(this.state.timeList)
        // console.log("////////////"+showIndex)
        return (
            <div className={styles.timeBox} onClick={() => {
                this.props.timeBoxHide()
             }}>
                <div className={css(sss.magic)} onClick={(event) => {
                    event.stopPropagation()
                }}>
                    <div className={styles.title}>
                        <div className={styles.bian} onClick={() => {
                            this.props.timeBoxHide()
                        }}>
                            取消
                        </div>
                        <div className={styles.m}>
                            取衣时间
                        </div>
                        <div className={styles.bian} onClick={() =>{
                            if(this.state.cDate && this.state.cTime){
                                // console.log("==================")
                                // console.log(this.dateIndex+"-------"+this.timeIndex)
                                addSessionData("myTimeList",this.state.timeList)
                                addSessionData("myTimeIndex",this.timeIndex===0?"0":this.timeIndex)
                                addSessionData("myDateIndex",this.dateIndex===0?"0":this.dateIndex)
                                setTimeout(() => {                                 
                                    // console.log(getSessionData("myDateIndex")+"-------"+getSessionData("myTimeIndex"))
                                    // console.log(getSessionData("myTimeList"))
                                    this.props.check(this.state.cDate,this.state.cTime)
                                }, 300);
                            }else{
                                this.props.timeBoxHide()
                            }
                        }}>
                            确定
                        </div>
                    </div>
                    <WhiteSpace />
                        <Tabs tabs={tabs} initialPage={showIndex} onTabClick={this.dateOnClick.bind(this)} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={3} />}>
                        {this.renderContent}
                        </Tabs>
                    <WhiteSpace />
                </div>
            </div>
        )
    }

    componentDidUpdate(){
        if(this.first){
            let ll = JSON.parse(getSessionData("myTimeList"))
            // console.log("首次update")
            // console.log(this.dateIndex+"-------"+this.timeIndex)
            // console.log(ll)
            if(ll){
                this.setState({timeList:ll})
                this.first = false
            }
        }
    }
    
    componentDidMount(){
        // console.log("首次加载")
        let t = getSessionData("myTimeIndex")
        if(t){
            this.timeIndex = t
        }
        let d = getSessionData("myDateIndex")
        if(d){
            this.dateIndex = d
        }
        // console.log(this.dateIndex+"-------"+this.timeIndex)
        const { dispatch } = this.props
        let businessId = getData("businessId");
        dispatch({
            type: 'timeManager/selTimes',
            payload: {businessId:businessId},
        })
    }
}
